<template>
  <div id="home">
    <headerTitle text="主页"></headerTitle>

    <div class="banner">
      <p>欢迎，海万因您而精彩</p>
      <div class="banner_info">
        <div class="banner_img">
          <img src="../assets/img/head-icon.png" height="171" width="171" alt="">
        </div>
        <div class="banner_text">
          <p class="fontSize18">韩帅帅</p>
          <p>无论你选择做什么,追求完美的程度决定你成就的高度。</p>
        </div>
      </div>
    </div>

    <div class="applicationContainer">
      <ul class="applicationFisrt">
        <li @click='apply'><i></i>员工请假</li>
        <li @click='applylist'><i class="comment_1"></i>查看信息</li>
        <li @click='reviewlist'><i class="comment_2"></i>领导审核</li>
      </ul>
      <ul class="applicationSecond">
        <li @click='success'><i class="comment_3"></i>工时核对</li>
        <li><i class="comment_4"></i>报销管理</li>
        <li><i class="comment_5"></i>工资薪酬</li>
      </ul>
    </div>

    <div class="split20"></div>

    <div class="announcement">
      <div class="announcement_title">
          <div m-role="info_icon">
            <i></i>
          </div>
          
          <div class="announcement_text">
            <h3 class="fontSize12">最新公告</h3>
            <span class="fontSize12">2017-03-04</span>
          </div>

          <div m-role="more">
            <i></i>
          </div>
      </div>

      <div class="announcement_body">
          <p class="fontSize18">2017年4月1号放假通知</p>
          <a>立即查看</a>
      </div>
    </div>
    <div class="split20"></div>
    <div class="announcement">
      <div class="announcement_title">
          <div m-role="info_icon" class="info_icon_1"></div>
          
          <div class="announcement_text">
            <h3 class="fontSize12">公司动态</h3>
            <span class="fontSize12">2017-03-04</span>
          </div>

          <div m-role="more"></div>
      </div>

      <ul class="announcement_list">
        <li>没见过辽篮这么倒霉的 给中国足球吃吃“三样菜”</li>
        <li>北京楼市新政短期内不松动 小米真做房地产：便宜一半</li>
        <li>男子山顶摆拍坠崖被批作死 队友太坑他头撞显示屏男子山顶摆拍坠崖被批作死 队友太坑他头撞显示屏</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import headerTitle from './commons/header.vue'
  export default {
    name: 'homepage',
    data () {
      return {
        msg: 'homepage',
      }
    },
    methods:{//方法
      /*regist(){
        var vm = this
        $.UIComfirm('还未注册,请先注册',function(re){
          if(re == 'yes'){
            vm.$router.push({
              path:'/register'
            })
          }
        })
      },*/
      apply(){
        this.$router.push({
          path:'/apply'
        })
      },
      applylist(){
        this.$router.push({
          path:'/applylist'
        })
      },
      reviewlist(){
        this.$router.push({
          path:'/reviewlist'
        })
      },
      success(){
        this.$router.push({
          //path:'/success'
          path:'/register'
        })
      }
    },
    computed:{//计算  引入vuex里的state数据

    },
    mounted(){//组件加载完执行
      
    },
    watch:{//监听数据，某数据改变时触发事件

    },
    components:{//引入组件
      headerTitle
    },
    destroyed(){//离开组件

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
